<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: myhead(~{::title},~{})">
    <title >测试 Editor</title>
</head>
<body>
    <form class="layui-form" th:action="@{/edit/test}" method="post">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">编辑器</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="myedit" lay-verify="myedit" id="myedit"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <button type="submit" class="layui-btn">提交</button>
        </div>
   </form>
    <div class="site-demo-button" style="margin-top: 20px;">
        <button class="layui-btn site-demo-layedit" data-type="content">获取编辑器内容</button>
        <button class="layui-btn site-demo-layedit" data-type="text">获取编辑器纯文本内容</button>
        <button class="layui-btn site-demo-layedit" data-type="selection">获取编辑器选中内容</button>
    </div>
    <div>
        <input type="file" name="file" id="myfile" class="layui-upload-file">
        <!--<button class="layui-btn layui-btn-small" id="btn2">提交测试</button>-->
    </div>
    <script type="text/javascript">
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','jquery','layedit','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var layedit = layui.layedit;
        var $ = layui.jquery;

        layedit.set({
            uploadImage: {
                url: ctx + 'example/edit/upload',
                type: 'post'
            }
        });

        var index = layedit.build('myedit');

        var active = {
            content: function(){
                alert(layedit.getContent(index)); //获取编辑器内容
            }
            ,text: function(){
                alert(layedit.getText(index)); //获取编辑器纯文本内容
            }
            ,selection: function(){
                alert(layedit.getSelection(index));
            }
        };

        $('.site-demo-layedit').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        var loadLayer;
        layui.upload({
            elem:'#myfile',
            url: ctx + '/example/edit/upload',
            method:'post',
            before: function(input){
                loadLayer = layer.load();
            },
            success:function (res) {
                if(loadLayer){
                    layer.close(loadLayer);
                }
                alert(res.data.src);
            }
        });

        /*$('#btn2').on('click',function () {
            $.ajax({
                type: "POST",
                url: "/edit/upload",
                enctype: 'multipart/form-data',
                data: {
                    file: $('#myfile').val()
                },
                success: function (data) {
                    alert("Data Uploaded: "+data);
                }
            })
        })*/

    });
</script>

</body>
</html>